<template>
  <div class="edit_add">
      <!-- 编辑和添加组件 -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="100px" >
  <el-form-item label="品牌名称" prop="name">
    <el-input v-model="ruleForm.name" style="width:225px"></el-input>
  </el-form-item>

    <!-- 三个图片上传 -->
   <el-form-item label="品牌图片" >
       <el-upload
  class="avatar-uploader"
  action=""
  :show-file-list="false"
  name="good_pic"
  :http-request ="upLoadImg1"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>
   <el-form-item label="品牌列表图片" >
   <el-upload
  class="avatar-uploader"
  action=""
  :show-file-list="false"
  name="good_pic"
  :http-request ="upLoadImg2"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>
   <el-form-item label="app专用图片" >
    <el-upload
  class="avatar-uploader"
  action=""
  :show-file-list="false"
  name="good_pic"
  :http-request ="upLoadImg3"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>

   <el-form-item label="最低价" >
    <el-input v-model="ruleForm.price" style="width:225px"></el-input>
  </el-form-item>

    <el-form-item label="新品">
        <el-switch
          v-model="ruleForm.is_new"
            active-value="1"
          inactive-value="0"
          active-color="#409eff"
          inactive-color="#dcdfe6"
        >

        </el-switch>
      </el-form-item>
   
   <el-form-item label="显示">
        <el-switch
          v-model="ruleForm.is_show"
          active-value="1" 
          inactive-value="0"
          active-color="#409eff"
          inactive-color="#dcdfe6"
        >

        </el-switch>
      </el-form-item>

        <el-form-item label="排序" prop="sort">
    <el-input v-model="ruleForm.sort" style="width:225px"></el-input>
  </el-form-item>
        <el-form-item label="品牌描述" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
      <el-button type="primary" @click="conserveFn">保存</el-button><el-button>取消</el-button>
  </el-form-item>


</el-form>

  </div>
</template>

<script>
const {uploadGoodPic,addBrandLists,getBrandDetail} = require("../../request/httpApi")
export default {
    data(){
        return{
            ruleForm:{
                name:'',
                price:'',
                is_new:'',
                is_show:'',
                sort:'',
                desc:''
            },
            //输入框的提示词
            rules:{
            name: [
            { required: true, message: '请输入品牌名称', trigger: 'blur' },
             ],
            sort: [
            { required: true, message: '排序不能为空', trigger: 'blur' },
             ],
            desc: [
            { required: true, message: '品牌描述不能为空', trigger: 'blur' },
             ],

            },
            //图片上传的默认值
            imageUrl1:'',
            imageUrl2:'',
            imageUrl3:''

        }
    },
    methods:{
      
    //点击保存按钮 发送保存信息
    conserveFn(){
        //保存之前的校验
      if(this.ruleForm.name==='' || this.ruleForm.desc==='' || this.ruleForm.sort===''){
          this.$message.error("*项为必填项")
          return
      }
        addBrandLists({
            id:this.$route.params.bid,
            name:this.ruleForm.name,
            pic_url:this.imageUrl1,
            list_pic_url:this.imageUrl2,
            app_list_pic_url:this.imageUrl3,
            floor_price:this.ruleForm.price,
            //接口要求的是布尔值,所以需要判断
            is_new:this.ruleForm.is_new==="1"?true:false,
            is_show:this.ruleForm.is_show==="1"?true:false,
            sort_order:this.ruleForm.sort,
            simple_desc:this.ruleForm.desc

        }).then( res=> {
            if(res.errno===0){
                //有id提示修改,没id就是提示添加
            this.$route.params.bid?this.$message.success("品牌信息修改成功"):this.$message.success("品牌信息添加成功")
                this.$router.push("/brand")
            }
            
        })
    },
    //上传图片
    upLoadImg1(data){
        //上传图片需要携带的参数
       let formdata = new FormData()
       //携带图片要求的格式
      formdata.append('good_pic',data.file)
        uploadGoodPic(formdata).then( res => {
            // console.log(res.data.fileUrl);
            this.imageUrl1=res.data.fileUrl
        })
    },
    upLoadImg2(data){
        //上传图片需要携带的参数
       let formdata = new FormData()
       //携带图片要求的格式
      formdata.append('good_pic',data.file)
        uploadGoodPic(formdata).then( res => {
            // console.log(res.data.fileUrl);
            this.imageUrl2=res.data.fileUrl
        })
    },
    upLoadImg3(data){
        //上传图片需要携带的参数
       let formdata = new FormData()
       //携带图片要求的格式
      formdata.append('good_pic',data.file)
        uploadGoodPic(formdata).then( res => {
            // console.log(res.data.fileUrl);
            this.imageUrl3=res.data.fileUrl
        })
    },

      //图片上传时大小和格式的校验
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    //点击编辑 跳转到这里的界面数据的渲染
    created(){
        // console.log(this.$route.params.bid);
        getBrandDetail({
            id:this.$route.params.bid
        }).then( res=> {
            console.log(res);
            if(res.errno===0){
                this.ruleForm.name=res.data.name,
                this.ruleForm.price=res.data.floor_price,
                this.ruleForm.is_new=res.data.is_new.toString(),
                this.ruleForm.is_show=res.data.is_show.toString(),
                this.ruleForm.sort=res.data.sort_order,
                this.ruleForm.desc=res.data.simple_desc,
                this.imageUrl1=res.data.pic_url,
                this.imageUrl2=res.data.list_pic_url,
                this.imageUrl3=res.data.app_list_pic_url
            }
        })
    }
}
</script>

<style lang="less">
    .edit_add {
        background-color: #fff;
        padding: 10px;
        .el-textarea__inner{
            width: 225px;
            height: 100px;
        }
        
    }


    .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 187px;
    height: 105px;
    line-height: 105px;
    text-align: center;
  }
  .avatar {
   width: 187px;
    height: 105px;
    display: block;
  }
</style>